<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<script type="text/javascript" src="js/rotarytable.js" ></script>
		<style type="text/css">
		  body, html {
            width: 100%;
            margin: 0;
            padding: 0;
        }

			.main{
				
			}
    .y{
     position: absolute;
     top:50%;
     left: 97%;				
    width: 2rem;
    height:8rem;
/*     background: white;*/
     z-index: 9;
 
    }
	.ra_cd{
     position: absolute;
     top:80%;
     left: 0.1rem;			
    width: 1.8rem;
    height: 1.8rem;
    background: red;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 1rem;
    display: block;
    margin: auto;
			}
	.ra_cd1{
     position: absolute;
     top:14%;
     left:10%;			
    width:1.6rem;
    height: 1.6rem;
    background: red;
    -moz-border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    border-radius: 0.8rem;
    display: none;
    overflow: hidden;
			}
	.ra_cd2{
     position: absolute;
     top:36%;
     left:10%;			
    width:1.6rem;
    height: 1.6rem;
    background: red;
    -moz-border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    border-radius: 0.8rem;
    display:none;
			}
	.ra_cd3{
     position: absolute;
     top:58%;
     left:10%;			
    width:1.6rem;
    height: 1.6rem;
    background: red;
    -moz-border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    border-radius: 0.8rem;
    display:none;
			}
	.y_txt{
		 position: absolute;
      top:50%;
     left:47%;				
    width: 4rem;
    height:8rem;
  /*  background: white;*/
    z-index: 9;
    

	}
	.f3{
     position: absolute;
     top:60%;
     left:0.6rem ;	
     width:3rem;
     height:1.5rem;
     background: blue;
     display: none;
   
			}
	.f2{
     position: absolute;
     top:38%;
     left:0.6rem ;	
     width:3rem;
     height:1.5rem;
     background: blue;
     display: none;
   
			}
	.f1{
     position: absolute;
     top:16%;
     left:0.6rem ;	
     width:3rem;
     height:1.5rem;
     background: blue;
     display: none;
			}
			
			  .winning {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 98;
            background: rgba(0,0,0,0.8);
            display:none;
        }

        .win_popu {
            position: absolute;
            width: 76%;
            height: 65%;
            background: url(img/Popup.png) no-repeat;
            top: 20%;
            left: 12%;
        }
          .center {
            position: absolute;
            top: 59%;
            left: 12%;
            min-width: 78%;
        }
		.my_close {
            position: absolute;
            width: 8%;
            top: 2%;
            left: 90%;
            z-index: 67;
        }
        .win_banner {
            position: absolute;
            top: 8%;
            left: 12%;
        }

        .prize {
            position: absolute;
            top: 28%;
            left: 16%;
        }

        .tosee {
            position: absolute;
            top: 66%;
            left: 31%;
            max-width: 42%;
        }

        .continue {
            position: absolute;
            top: 76%;
             left: 31%;
             max-width: 42%;
             
        }
        .game {
              position: absolute;
			  width: 92%;
			  height: 49%;
			  top: 45%;
			  left: 20%;
			  display:none;
        }

        .togo {
           position: absolute;
		    width: 28%;
		    height: 31%;
		    top: 33%;
		    left: 33%;
       
        }

            .togo img {
                max-width: 27%;
            }

        .content {
            position: absolute;
            width: 81%;
            height:79%;
          
       
        }

            .content img {
                max-width: 114%;
            }
  			.game input{
  			font-size: 42px;
		    top: 105%;
		    left: 30%;
		    position: absolute;
		    z-index: 9;
  			}
        
		</style>
		
		
		
		
		<script>
            !function(e, t) {
                function i() {
                    var t = o.getBoundingClientRect().width;
                    t / a > 750 && (t = 750 * a);
                    var i = t / 10;
                    o.style.fontSize = i + "px", d.rem = e.rem = i
                }
                var n, r = e.document,
                        o = r.documentElement,
                        a = (r.querySelector('meta[name="viewport"]'), r.querySelector('meta[name="flexible"]'), 0),
                        d = t.flexible || (t.flexible = {});
                if (!a) {
                    var l = (e.navigator.appVersion.match(/android/gi), e.navigator.appVersion.match(/iphone/gi)),
                            m = e.devicePixelRatio;
                    a = l ? m >= 3 && (!a || a >= 3) ? 3 : m >= 2 && (!a || a >= 2) ? 2 : 1 : 1
                }
                o.setAttribute("data-dpr", a), e.addEventListener("resize", function() {
                    clearTimeout(n), n = setTimeout(i, 300)
                }, !1), e.addEventListener("pageshow", function(e) {
                    e.persisted && (clearTimeout(n), n = setTimeout(i, 300))
                }, !1), i(), d.dpr = e.dpr = a, d.refreshRem = i
            }(window, window.lib || (window.lib = {}));
        </script>
	</head>
	<body  style=" background:url(img/bg.png) no-repeat;background-size:100% 100%; top:0; height: 130vh;">
<!--	大箱子-->
		<div class="main">
			
		
<!--      头-->
		<div class="head">
			
			
		</div>
		
		<!--身子-->
	<div class="content">
		<!--菜单按钮-->
		<div class="y">
		<div class="ra_cd"></div>
		<div class="ra_cd1">
			<img src="img/cl.jpg" />
		</div>
		<div class="ra_cd2"></div>
		<div class="ra_cd3"></div>
		</div>
		<div class="y_txt">
		<div class="f1"></div>
		<div class="f2"></div>
		<div class="f3"></div>
		</div>
		
		 <!--//本次抽奖的弹窗-->
        <div class="winning">
            <div class="win_popu">
                   <img src="img/winning.png"  class="win_banner"/>
                 <img src="img/x.png" class="my_close" />
                <img src="img/points_50.png"  class="prize"/>
                <img src="img/center.png" class="center" />
                <img src="img/tosee.png"  class="tosee"/>
                <img src="img/Continue.png"  class="continue"/>
            </div>
        </div>
       
        <div class="game">
            <div class="content">
                <img src="img/turntable.png" id="rotary" />
            </div>
             <div class="togo">
                <img src="img/start.png" id="start"/>
            </div>
            <input type="button" value="退出游戏" onclick="itex()" />
        </div>

		
	</div>
		
		
		
		<!--下底-->
		<div class="foot">
			
		</div>
		</div>
		<script>
			var a = 0 ;
			$(".ra_cd").click(function(){
				if(a == 0){
			    $(".ra_cd1").fadeIn(600);
				$(".ra_cd2").fadeIn(400);
				$(".ra_cd3").fadeIn(200);
				$(".y").css("z-index","9")
				$(".y_txt").css("z-index","9")
				
				a = 1;
				}
				
				else if (a == 1)
				{
			    $(".ra_cd1").fadeOut(200);
				$(".ra_cd2").fadeOut(400);
				$(".ra_cd3").fadeOut(600);
				$(".y").css("z-index","0")
				$(".y_txt").css("z-index","0")
					a = 0
				}
			
			});
			$('.ra_cd1').hover( 
				function (){ 
				$('.f1').stop().fadeTo(200,1); 
				},function() { 
				$('.f1').stop().fadeTo(200,0); 
				} 
				) 
				$('.ra_cd2').hover( 
				function (){ 
				$('.f2').stop().fadeTo(200,1); 
				},function() { 
				$('.f2').stop().fadeTo(200,0); 
				} 
				) 
				$('.ra_cd3').hover( 
				function (){ 
				$('.f3').stop().fadeTo(200,1); 
				},function() { 
				$('.f3').stop().fadeTo(200,0); 
				} 
				) 
				$('.f1').click(function(){
					$(".winning").show();
					$(".y").css("z-index","0")
					$(".y_txt").css("z-index","0")
				})
				$(".my_close").click(function(){
						$(".winning").hide();
				})
				$('.f2').click(function(){
				$(".game").show();
				$(".ra_cd1").hide(200);
				$(".ra_cd2").hide(400);
				$(".ra_cd3").hide(600);
				$(".y").css("z-index","0")
				$(".y_txt").css("z-index","0")
					a = 0
				})
				
				  $(function () {
                var bRotate = false;
                var rotateFn = function (awards, angles, callback) {

                    bRotate = !bRotate;

                    $('#rotary').stopRotate();

                    $('#rotary').rotate({

                        angle: 0,

                        animateTo: angles + 1800,

                        duration: 6000,

                        callback: function () {
                            drawEnable = true;
                            bRotate = !bRotate;
                            if (typeof callback === 'function') {
                                callback()
                            }
                        }
                    })
                };

                $('#start').click(function () {

                    /*  if (!drawEnable) {
                          // do nothing
                      }else if(chance == 0){
                          $(".share").show();
                      }else {
                          drawEnable = false;
                          $.ajax({
                              url: (HOST+'/main/draw'),
                              type: 'GET',
                              dataType: 'json',
                              success:function(res){
                                  if (res.code === 1) {
                                      $("#number").text(--chance);
                                      var item =rnd(0, 7); //只需要改这个数,从后端获取看是哪个节点
  
                                      /*var coupontype = res.data;
  
                                       if(coupontype == 1){
                                       item = 1;
                                       }else if(coupontype == 2){
                                       item = 2;
                                       }else if(coupontype == 3){
                                       item = 0;
                                       }else if(coupontype == 4){
                                       item = 4
                                       }else if(coupontype == 5){
                                       item = 5;
                                       }*/
                    var item = 3;
                    if (bRotate) return;
                    //                            setTimeout(preferential(),2000)
                    preferential();

                    function preferential() {
                        switch (item) {
                            case 0:
                                //var angle = [26, 88, 137, 185, 235, 287, 337];
                                rotateFn(0, 51.42, function () {
                                    // alert("免費");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/free.png");
                                });

                                break;
                            case 1:
                                //var angle = [88, 137, 185, 235, 287];
                                rotateFn(1, 102.85, function () {
                                    //alert("5積分");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/points_5.png");
                                });
                                break;
                            case 2:
                                //var angle = [137, 185, 235, 287];
                                rotateFn(2, 154.28, function () {
                                    //alert("蘋果");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/iphone7.png");
                                });
                                break;
                            case 3:
                                //var angle = [137, 185, 235, 287];
                                rotateFn(3, 205.71, function () {
                                    //alert("一積分");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/points_1.png");
                                });
                                break;
                            case 4:
                                //var angle = [185, 235, 287];
                                rotateFn(4, 257.14, function () {
                                    //alert("50積分");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/points_50.png");
                                });
                                break;
                            case 5:
                                //var angle = [185, 235, 287];

                                rotateFn(5, 308.57, function () {
                                    //alert("小家电");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/physical.png");
                                });
                                break;
                            case 6:
                                //var angle = [185, 235, 287];

                                rotateFn(6, 355, function () {
                                    //alert("十幾分");
                                    $(".winning").show();
                                    $(".prize").attr('src', "imges/points_10.png");
                                });
                                break;
                        }
                    }
                });  
            });
            function itex(){
            	$(".game").hide();
            }
        
		</script>
	</body>
</html>
